.footer {
  $base-spacing: 1.5em !default;
  $action-color: #477DCA !default;
  $medium-screen: 40em !default;
  $large-screen: 53.75em !default;
  $footer-background: desaturate(darken($action-color, 20%), 30%);
  $footer-color: white;
  $footer-link-color: transparentize($footer-color, 0.6);
  $footer-disclaimer-color: transparentize($footer-color, 0.6);

  background: $footer-background;
  padding: ($base-spacing * 2) $gutter;
  width: 100%;

  .footer-logo {
    margin-bottom: 2em;
    text-align: center;

    img {
      height: 3em;
    }
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: $base-spacing;
  }

  ul {
    flex-basis: 13em;
    flex-shrink: 0;
    margin-bottom: $base-spacing * 2;
    padding: 0;
  }

  li {
    line-height: 1.5em;
    list-style: none;
    text-align: center;
  }

  li a {
    color: $footer-link-color;
    text-decoration: none;

    &:focus,
    &:hover {
      color: transparentize($footer-color, 0);
    }
  }

  li h3 {
    color: $footer-color;
    font-size: 1em;
    margin-bottom: 0.4em;
  }

  hr {
    border: 1px solid transparentize($footer-disclaimer-color, 0.3);
    margin: 0 auto $base-spacing;
    width: 12em;
  }

  p {
    color: $footer-disclaimer-color;
    font-size: 0.9em;
    line-height: 1.5em;
    margin: auto;
    max-width: 35em;
    text-align: center;
  }
}
